
<template>
  <div v-loading="flag">
    <p style="font-weight:800">数据</p>
    <p class="line" />
    <div class="nav">
      <div class="left">
        <div class="left_text" style=" background-color: #108EE9">
          <p>机构数据</p>
        </div>
        <div class="right_nav" style="border:1px solid  #108EE9">
          <div class="right_text">
            <div class="nav_text">
              <div>{{ orgnazition.studentCount }}</div>
              <div>学员数量(人)</div>
            </div>
            <div class="nav_text">
              <div>{{ orgnazition.employeeCount }}</div>
              <div>员工数量(人)</div>
            </div>
            <div class="nav_text">
              <div>{{ orgnazition.courseCount }}</div>
              <div>开设课程(个)</div>
            </div>
            <div class="nav_text">
              <div>{{ orgnazition.classCount }}</div>
              <div>开设班级(个)</div>
            </div>
          </div>

          <div class="right_red">
            <div class="nav_text text_color">
              <div>{{ parseFloat( orgnazition.totalAmout * 100) / 10000 }}</div>
              <div>售卡总额(元)</div>
            </div>
          </div>

        </div>
      </div>
      <div class="right">
        <div class="left_text" style=" background-color: rgba(244,71,113,1);">
          <p>赛事数据</p>
        </div>
        <div class="right_nav" style="border:1px solid  rgba(244,71,113,1)">
          <div class="right_text">
            <div class="nav_text">
              <div>{{ game.competitionCount }}</div>
              <div>创建赛事(次)</div>

            </div>
            <div class="nav_text">
              <div>{{ game.delegationCount }}</div>
              <div>参与机构(个)</div>

            </div>
            <div class="nav_text">
              <div>{{ game.athleteCount }}</div>
              <div>参加人数(人)</div>

            </div>
          </div>

          <div class="right_red">
            <div class="nav_text text_color">
              <div>{{ parseFloat( game.totalAmount * 100) / 10000 }}</div>
              <div>赛事总额(元)</div>

            </div>
            <div class="nav_text text_color">
              <div>{{ parseFloat( game.logisticsAmount * 100) / 10000 }}</div>
              <div>后勤总额(元)</div>

            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="nav">
      <div class="left">
        <div class="left_text" style=" background-color: rgba(255,154,62,1)">
          <p>培训数据</p>
        </div>
        <div class="right_nav" style="border:1px solid  rgba(255,154,62,1)">
          <div class="right_text">
            <div class="nav_text">
              <div>{{ tran.trainningCount }}</div>
              <div>创建培训(次)</div>

            </div>
            <div class="nav_text">
              <div>{{ tran.entryRegisterCount }}</div>
              <div>参加人数(人)</div>

            </div>
          </div>
          <div class="right_red">
            <div class="nav_text text_color">
              <div>{{ parseFloat( tran.totalAmount * 100) / 10000 }}</div>
              <div>培训总额(元)</div>

            </div>
            <div class="nav_text text_color">
              <div>{{ parseFloat( tran.logisticsAmount * 100) / 10000 }}</div>
              <div>后勤总额(元)</div>

            </div>
          </div>

        </div>

      </div>
      <div class="right">
        <div class="left_text" style=" background-color: rgba(51,42,124,1);">
          <p>商城数据</p>
        </div>
        <div class="right_nav" style="border:1px solid  rgba(51,42,124,1)">
          <div class="right_text">
            <div class="nav_text">
              <div v-show="mall.productCount">{{ mall.productCount }}</div>
              <div>销售中商品(个)</div>

            </div>
          </div>
          <div class="right_red">
            <div class="nav_text text_color">
              <div v-show="mall.totalAmount">{{ parseFloat( mall.totalAmount * 100) / 10000 }}</div>
              <div>销售总额(元)</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="nav">
      <div class="left">
        <div class="left_text" style=" background-color: rgba(244,71,113,1)">
          <p class="Dan">级段位申报</p>
        </div>

        <div class="right_nav" style="border:1px solid  rgba(244,71,113,1)">
          <div class="right_text">
            <div class="nav_text">
              <div>{{ duan.duanExamsCount }}</div>
              <div>申报场次(场)</div>
            </div>
            <div class="nav_text">
              <div>{{ duan.personCount }}</div>
              <div>申报总人数(人)</div>
            </div>
          </div>
          <div class="right_red">
            <div class="nav_text text_color">
              <div>{{ parseFloat( duan.totalCount * 100) / 10000 }}</div>
              <div>流水总额(元)</div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="left_text" style=" background-color: #DF1A1A">
          <p class="Member">会员费</p>
        </div>
        <div class="right_nav" style="border:1px solid  #DF1A1A">

          <div class="right_text">

            <div class="nav_text">
              <div>{{ fee.personCount }}</div>
              <div>缴纳人数(人)</div>
            </div>
          </div>
          <div class="right_red">
            <div class="nav_text text_color">
              <div v-show="fee.totalAmount">{{ parseFloat( fee.totalAmount * 100) / 10000 }}</div>
              <div>流水总额(元)</div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import { api_GET_ClubBranchClubStatisticsOrgnazitionUnitId, api_GET_ClubBranchBranchFeeStatisticBranchId, api_GET_ClubBranchCompetitionStatisticsOrgnazitionUnitId, api_GET_ClubBranchBranchDuanExamStatisticBranchId, api_GET_ClubBranchTrainningStatisticsOrgnazitionUnitId, api_GET_ClubBranchBranchMallStatisticOrgnazitionUnitId } from '@/extend/api/hallswaggerApi/app.js';
export default {
  data() {
    return {
      flag: false,
      num: 0,
      orgnazition: {}, // 机构
      game: {}, // 比赛
      tran: {}, // 培训
      mall: {}, // 商城
      duan: {}, // 级段位
      fee: {} // 会员费
    };
  },
  watch: {
    num: {
      handler() {
        if (this.num === 6) {
          this.flag = false;
        }
      }
    }
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.flag = true;
      this.num = 0;
      api_GET_ClubBranchClubStatisticsOrgnazitionUnitId(this.$route.query.branchid).then(res => {
        this.orgnazition = res;
        this.num += 1;
      }, error => {
        this.num += 1;
        this.$message({ type: 'error', message: '获取信息失败！' + (error.error && error.error.message || '') });
        reject(error);
      });
      api_GET_ClubBranchCompetitionStatisticsOrgnazitionUnitId(this.$route.query.branchid).then(res => {
        this.game = res;
        this.num += 1;
      }, error => {
        this.num += 1;
        this.$message({ type: 'error', message: '获取信息失败！' + (error.error && error.error.message || '') });
        reject(error);
      });
      api_GET_ClubBranchTrainningStatisticsOrgnazitionUnitId(this.$route.query.branchid).then(res => {
        this.tran = res;
        this.num += 1;
      }, error => {
        this.num += 1;
        this.$message({ type: 'error', message: '获取信息失败！' + (error.error && error.error.message || '') });
        reject(error);
      });
      api_GET_ClubBranchBranchMallStatisticOrgnazitionUnitId(this.$route.query.branchid).then(res => {
        this.mall = res;
        this.num += 1;
      }, error => {
        this.num += 1;
        this.$message({ type: 'error', message: '获取信息失败！' + (error.error && error.error.message || '') });
        reject(error);
      });
      api_GET_ClubBranchBranchDuanExamStatisticBranchId(this.$route.query.branchid).then(res => {
        this.duan = res;
        this.num += 1;
      }, error => {
        this.num += 1;
        this.$message({ type: 'error', message: '获取信息失败！' + (error.error && error.error.message || '') });
        reject(error);
      });
      api_GET_ClubBranchBranchFeeStatisticBranchId(this.$route.query.branchid).then(res => {
        this.fee = res;
        this.num += 1;
      }, error => {
        this.num += 1;
        this.$message({ type: 'error', message: '获取信息失败！' + (error.error && error.error.message || '') });
        reject(error);
      });
    }
  }

};
</script>

<style lang="scss" scoped>
.right_red {
  display: flex;
  align-items: center;
}
.right_nav {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding-right: 16px;
}
.line{
    height: 1px;
    width: 100%;
    background-color:  rgba(0, 0, 0, 0.09);
    margin-top: 15px;
    margin-bottom: 15px;
}
.nav {
    margin-bottom: 20px;
}
.left {
  margin-bottom: 20px;
}
.nav>div{
    height: 80px;
    display: flex;
}
.left_text {
    width: 80px;
    color: white;
    text-align: center;
    height: 100%;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
}
.left_text>p {
width: 41px;
padding-top: 6px;
}
.left_text .Dan {
  width: 45px;

}

.left_text .Member {
  width: 45px;

}
.left_text>p>span{
    display: inline-block;
    margin-bottom: 6px;
}
.right_text {
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 40px;

}
.nav_text {
    min-width: 56px;
    font-size: 20px;
    margin-right: 60px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.nav_text div:nth-of-type(2){
color:rgba(0,0,0,0.65);
font-size: 12px;
margin-top: 4px;
}
.nav_text div:nth-of-type(1){
width: 100%;
}
.text_color {
    float: left;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    margin-right: 0px;
    margin-left: 40px;
}
.text_color div:nth-of-type(1) {
    color: rgba(255,0,0,0.85);
    font-weight: bold;
    font-size: 20px;
}

</style>
